import React from 'react';
import FilePathBreadCrumnItem from './FilePathBreadCrumbItem';
import FilePathBreadCrumbSeparator from './FilePathBreadCrumbSeparator';
import OStyle from './index.less';
import { IFilePathBreadCrumbProps } from './interface';

const FilePathBreadCrumb: React.FC<IFilePathBreadCrumbProps> = (props) => {
  const { className, style, items, onClick, separator } = props;
  return (
    <nav className={`${OStyle.safe_edu_breadcrumb} ${className}`} style={style}>
      <ol>
        {items.map((item) => (
          <li key={item.key}>
            <FilePathBreadCrumnItem item={item} onItemClick={onClick} />
            <FilePathBreadCrumbSeparator separator={separator} />
          </li>
        ))}
      </ol>
    </nav>
  );
};

export default FilePathBreadCrumb;
